window.addEventListener('load',function(){
    // 鼠标经过，左右按钮出现
    // 鼠标离开，左右按钮消失
    var lunbo =document.querySelector('.lunbo')
    var left = document.querySelector('.left')
    var right = document.querySelector('.right')
    lunbo.addEventListener('mouseover',function(){
        left.style.display = 'block'
        right.style.display = 'block'
        clearInterval(timer)
        timer=null
    })
    lunbo.addEventListener('mouseout',function(){
        left.style.display = 'none'
        right.style.display = 'none'
        timer = setInterval(function(){
            // 手动调用事件
            right.click()
        },3000)
    })



    // 动态生成小圆圈
    var ul = document.querySelector('ul')
    var ol = document.querySelector('.circle')
    var juli = ul.children[0].offsetWidth 
    var num=0
    var circle = 0
    var flag = true//节流阀
    for(var i=0;i<ul.children.length;i++){
        // 创建li
        var li = document.createElement('li')
        li.setAttribute('index',i)
        // 插入ol里
        ol.appendChild(li)
        // 点击li，当前的li添加change类 其他的移除这个类
        li.addEventListener('click',function(){
            for(var i= 0 ;i<ol.children.length;i++){
                ol.children[i].className = ''
            }
            this.className = 'change'
            // 点击小圆圈 ul移动
            // 移动距离=小圆圈的index*img.offset width
            var index = this.getAttribute('index')
            num=index
            circle=index
            animate(ul,-index * juli)
        })
    }
    ol.children[0].className = 'change'

   
    var first = ul.children[0].cloneNode(true)
    ul.appendChild(first)
    right.addEventListener('click',function(){
        
        if(flag){
            flag=false
            if(num==ul.children.length-1){
            
                ul.style.left=0
                num=0
            }
            num++
            animate(ul,-num*juli,function(){
                flag=true
            })
            circle++
            if(circle==ol.children.length){
                circle=0
            }
           circleChange()
        }
    })
   
    left.addEventListener('click',function(){
        if(flag){
            if(num==0){
                num=ul.children.length-1
                ul.style.left = -num*juli+'px'
                }
                num--
                animate(ul,-num*juli,function(){
                    flag=true
                })
                circle--
                if(circle<0){
                    circle=ol.children.length-1
                }
                circleChange()
        }
    })
    function circleChange(){
        for(var i=0;i<ol.children.length;i++){
            ol.children[i].className = ''
        }
        ol.children[circle].className = 'change'
    }
    var timer = setInterval(function(){
        // 手动调用事件
        right.click()
    },3000)
})